<template>
  <div
    :class="['eva-button', `eva-button-type${btnType}`]"
    @mouseover="isHover = true && showAnimation"
    @mouseleave="isHover = false"
  >
    <eva-stripe
      :isHover="isHover"
      :borderSize="borderSize"
      :animationLevel="animationLevel"
    ></eva-stripe>
    <template>
      <div :class="['eva-button-text', `eva-button-text${btnType}`]">
        <slot>
          <span>按钮</span>
        </slot>
      </div>
    </template>
    <eva-stripe
      :isHover="isHover"
      :borderSize="borderSize"
      :animationLevel="animationLevel"
    ></eva-stripe>
  </div>
</template>
<script>
import evaStripe from './evaStripe.vue';
export default {
  components: { evaStripe },
  name: 'EVAButton',
  props: {
    type: {
      type: String,
      default: 'medium',
    },
    showAnimation: {
      type: Boolean,
      default: true,
    },
  },
  data: () => ({
    isHover: false,
    borderSize: 1,
    animationLevel: 1,
    btnType: 1,
  }),
  methods: {
    setSize(size) {
      this.borderSize = size;
      this.animationLevel = size;
      this.btnType = size;
    },
  },
  watch: {
    type: {
      handler(newVal) {
        switch (newVal) {
          case 'small':
            this.setSize(1);
            break;
          case 'medium':
            this.setSize(2);
            break;
          case 'large':
            this.setSize(3);
            break;
          case 'block':
            this.setSize(2);
            this.btnType = 4;
            break;
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.eva-button,
span {
  cursor: pointer;
  font-family: 'EVA-Matisse_Classic';
}
.eva-button {
  width: 100px;
}
.eva-button-type1 {
  width: 50px;
}
.eva-button-type2 {
  width: 100px;
}
.eva-button-type3 {
  width: 150px;
}
.eva-button-type4 {
  width: 100%;
}
.eva-button-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.eva-button-text1 {
  font-size: 16px;
}
.eva-button-text2 {
  font-size: 22px;
}
.eva-button-text3 {
  font-size: 28px;
}
</style>